<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿能充 - 充电桩详情</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    :root {
      --primary-color: #00a896;
      --secondary-color: #02c39a;
      --dark-color: #05668d;
      --light-color: #f0f3bd;
      --accent-color: #028090;
      --text-dark: #333;
      --text-light: #f8f9fa;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--text-dark);
      background-color: #f9f9f9;
      min-height: 100vh;
      display: flex;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 250px;
      background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
      color: white;
      padding: 20px 0;
      height: 100vh;
      position: fixed;
      box-shadow: var(--shadow);
      z-index: 100;
    }

    .sidebar-header {
      padding: 0 20px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }

    .sidebar-header .logo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .sidebar-header .logo-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 18px;
      color: var(--light-color);
    }

    .sidebar-header h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin: 0;
    }

    .sidebar-header p {
      font-size: 0.8rem;
      opacity: 0.8;
      margin: 0;
    }

    .nav-menu {
      list-style: none;
      padding: 0 15px;
    }

    .nav-item {
      margin-bottom: 5px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      border-radius: 8px;
      transition: var(--transition);
    }

    .nav-link:hover, .nav-link.active {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }

    .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
      font-size: 16px;
    }

    .nav-link .badge {
      margin-left: auto;
      background-color: var(--light-color);
      color: var(--dark-color);
      font-size: 0.7rem;
      padding: 3px 6px;
    }

    .user-profile {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      padding: 0 20px;
    }

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }

    .user-info:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 14px;
    }

    .user-name {
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .user-role {
      font-size: 0.7rem;
      opacity: 0.8;
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      margin-left: 250px;
      padding: 30px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .page-title h1 {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 5px;
    }

    .page-title p {
      color: #777;
      font-size: 0.9rem;
      margin: 0;
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
    }

    .btn i {
      margin-right: 6px;
    }

    .btn-primary {
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
      color: white;
      box-shadow: 0 4px 15px rgba(0, 168, 150, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 168, 150, 0.4);
    }

    .btn-outline {
      background: transparent;
      border: 1px solid #ddd;
      color: #555;
    }

    .btn-outline:hover {
      background-color: #f5f5f5;
    }

    .btn-secondary {
      background-color: #f0f0f0;
      color: #555;
    }

    .btn-secondary:hover {
      background-color: #e0e0e0;
    }

    /* 充电桩信息卡片 */
    .charger-card {
      background-color: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 30px;
    }

    .charger-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px;
      border-bottom: 1px solid #f0f0f0;
    }

    .charger-basic-info {
      display: flex;
      align-items: center;
    }

    .charger-name {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--dark-color);
    }

    .charger-code {
      font-size: 0.9rem;
      color: #777;
      margin-left: 10px;
    }

    .charger-status {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      margin-left: 15px;
    }

    .status-available {
      background-color: #e8f5e9;
      color: #2e7d32;
    }

    .status-charging {
      background-color: #e3f2fd;
      color: #1976d2;
    }

    .status-fault {
      background-color: #ffebee;
      color: #c62828;
    }

    .status-maintenance {
      background-color: #fff3e0;
      color: #e65100;
    }

    .charger-actions {
      display: flex;
      gap: 10px;
    }

    .charger-image {
      width: 100%;
      height: 300px;
      object-fit: cover;
      background-color: #e9ecef;
    }

    .charger-details {
      padding: 25px;
    }

    .detail-section {
      margin-bottom: 25px;
    }

    .section-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }

    .detail-item {
      display: flex;
      align-items: flex-start;
    }

    .detail-label {
      min-width: 80px;
      color: #777;
      font-size: 0.9rem;
      margin-right: 10px;
    }

    .detail-value {
      color: var(--text-dark);
      font-size: 0.9rem;
      font-weight: 500;
    }

    .detail-description {
      line-height: 1.8;
      color: #555;
      margin-top: 15px;
    }

    .charger-map {
      width: 100%;
      height: 300px;
      background-color: #e9ecef;
      border-radius: 8px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #777;
      position: relative;
    }

    .map-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
      opacity: 0.2;
    }

    .map-text {
      text-align: center;
      z-index: 1;
    }

    /* 价格信息 */
    .price-info {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      margin-top: 20px;
    }

    .price-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 15px;
    }

    .price-value {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--primary-color);
    }

    /* 预约模态框 */
    .reservation-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      background-color: white;
      border-radius: 12px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      animation: modalFadeIn 0.3s;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
        transform: translateY(-50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .modal-header {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--dark-color);
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #999;
      cursor: pointer;
      transition: var(--transition);
    }

    .modal-close:hover {
      color: var(--dark-color);
    }

    .modal-body {
      padding: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-weight: 500;
    }

    .form-input {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 0.9rem;
      transition: var(--transition);
    }

    .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(0, 168, 150, 0.2);
    }

    .form-date {
      display: flex;
      gap: 15px;
    }

    .form-date input {
      flex: 1;
    }

    .reservation-actions {
      display: flex;
      gap: 10px;
      margin-top: 30px;
    }

    /* 操作成功提示 */
    .toast {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      border-radius: 8px;
      background-color: var(--primary-color);
      color: white;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      z-index: 1001;
      transform: translateX(calc(100% + 20px));
      transition: transform 0.3s ease;
    }

    .toast.show {
      transform: translateX(0);
    }

    .toast i {
      margin-right: 10px;
      font-size: 1.2rem;
    }

    /* 二维码展示 */
    .qr-code-container {
      text-align: center;
      margin-top: 20px;
    }

    .qr-code-image {
      width: 120px;
      height: 120px;
      background-color: #f0f0f0;
      border-radius: 8px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
        overflow: hidden;
      }

      .sidebar-header h3,
      .sidebar-header p,
      .nav-link span,
      .user-name,
      .user-role {
        display: none;
      }

      .sidebar-header {
        padding: 15px 10px;
      }

      .nav-link {
        justify-content: center;
        padding: 12px 0;
      }

      .nav-link i {
        margin-right: 0;
        font-size: 18px;
      }

      .main-content {
        margin-left: 70px;
      }
    }

    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .charger-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .charger-actions {
        width: 100%;
      }

      .charger-actions .btn {
        flex: 1;
        justify-content: center;
      }
    }

    @media (max-width: 576px) {
      .main-content {
        padding: 20px 15px;
      }

      .charger-image {
        height: 200px;
      }

      .charger-map {
        height: 200px;
      }
    }
  </style>
</head>
<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-charging-station"></i>
      </div>
      <div>
        <h3>绿能充</h3>
        <p>用户面板</p>
      </div>
    </div>
  </div>

  <ul class="nav-menu">
    <li class="nav-item">
      <a href="/user/home" class="nav-link active">
        <i class="fas fa-tachometer-alt"></i>
        <span>仪表盘</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/announcement/list" class="nav-link">
        <i class="fas fa-users"></i>
        <span>公告栏</span>
        <span class="badge">5</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/pile/list" class="nav-link">
        <i class="fas fa-charging-station"></i>
        <span>充电桩</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/map/mapDetail" class="nav-link">
        <i class="fas fa-list-alt"></i>
        <span>地图</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/user/center/personCenter/${user.id}" class="nav-link">
        <i class="fas fa-exclamation-triangle"></i>
        <span>个人中心</span>
        <span class="badge">3</span>
      </a>
    </li>
  </ul>

  <div class="user-profile">
    <div class="user-info">
      <div class="user-avatar">
        <i class="fas fa-user"></i>
      </div>
      <div>
        <div class="user-name">用户</div>
        <div class="user-role">普通用户</div>
      </div>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <div class="header">
    <div class="page-title">
      <h1>充电桩详情</h1>
      <p>查看充电桩详细信息</p>
    </div>
    <div class="header-actions">
      <button class="btn btn-outline" id="backBtn">
        <i class="fas fa-arrow-left"></i> 返回
      </button>
    </div>
  </div>

  <!-- 充电桩信息卡片 -->
  <div class="charger-card">
    <div class="charger-header">
      <div class="charger-basic-info">
        <div>
          <h2 class="charger-name">${chargingPile.name}</h2>
          <span class="charger-code">编号: ${chargingPile.code}</span>
        </div>
        <div class="charger-status status-${chargingPile.status.toLowerCase()}">
          <i class="fas fa-circle mr-2" style="font-size: 8px;"></i>
          <span id="statusText"></span>
        </div>
      </div>
      <div class="charger-actions">
        <a href="${pageContext.request.contextPath}/user/record/add/${chargingPile.id}">
          <i class="fas fa-calendar-plus"></i> 预约充电
        </a>
        <button class="btn btn-outline">
          <i class="fas fa-share-alt"></i> 分享
        </button>
      </div>
    </div>

    <div class="charger-image">
      <img src="https://picsum.photos/800/300?random=1" alt="充电桩图片" style="width:100%; height:100%; object-fit:cover;">
    </div>

    <div class="charger-details">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">基本信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <div class="detail-label">类型:</div>
            <div class="detail-value" id="chargerType"></div>
          </div>
          <div class="detail-item">
            <div class="detail-label">功率:</div>
            <div class="detail-value">${chargingPile.power} kW</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">价格:</div>
            <div class="detail-value">${chargingPile.price} 元/度</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">运营商:</div>
            <div class="detail-value">${chargingPile.operator}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">生产厂家:</div>
            <div class="detail-value">${chargingPile.manufacturer}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">安装日期:</div>
            <div class="detail-value" id="installDate"></div>
          </div>
          <div class="detail-item">
            <div class="detail-label">最近维护:</div>
            <div class="detail-value" id="lastMaintenanceDate"></div>
          </div>
          <div class="detail-item">
            <div class="detail-label">创建时间:</div>
            <div class="detail-value" id="createTime"></div>
          </div>
        </div>
      </div>

      <!-- 位置信息 -->
      <div class="detail-section">
        <h3 class="section-title">位置信息</h3>
        <div class="detail-grid">
          <div class="detail-item" style="grid-column: 1 / -1;">
            <div class="detail-label">详细地址:</div>
            <div class="detail-value">${chargingPile.location}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">经纬度:</div>
            <div class="detail-value">${chargingPile.longitude}, ${chargingPile.latitude}</div>
          </div>
        </div>
        <div class="charger-map">
          <i class="fas fa-map-marker-alt map-icon"></i>
          <div class="map-text">
            <p>点击查看地图</p>
            <button class="btn btn-outline mt-2">
              <i class="fas fa-map"></i> 查看完整地图
            </button>
          </div>
        </div>
      </div>

      <!-- 描述信息 -->
      <div class="detail-section">
        <h3 class="section-title">充电桩描述</h3>
        <div class="detail-description">
          ${chargingPile.description}
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="detail-section">
        <h3 class="section-title">价格信息</h3>
        <div class="price-info">
          <div class="price-title">当前充电价格</div>
          <div class="price-value">${chargingPile.price} 元/度</div>
          <p class="mt-2 text-sm text-gray-600">价格可能会根据时间段和用电量有所调整</p>
        </div>
      </div>

      <!-- 二维码信息 -->
      <div class="detail-section">
        <h3 class="section-title">扫码充电</h3>
        <div class="qr-code-container">
          <div class="qr-code-image">
            <c:if test="${not empty chargingPile.qrCode}">
              <img src="${chargingPile.qrCode}" alt="充电桩二维码" style="width:100%; height:100%; object-fit:contain;">
            </c:if>
            <c:if test="${empty chargingPile.qrCode}">
              <i class="fas fa-qrcode" style="font-size: 48px; opacity: 0.3;"></i>
            </c:if>
          </div>
          <p class="mt-2 text-sm text-gray-600">扫描二维码开始充电</p>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 处理状态文本
    const statusText = document.getElementById('statusText');
    const status = '${chargingPile.status}';

    switch(status) {
      case 'AVAILABLE':
        statusText.textContent = '空闲中';
        break;
      case 'CHARGING':
        statusText.textContent = '充电中';
        break;
      case 'FAULT':
        statusText.textContent = '故障';
        break;
      case 'MAINTENANCE':
        statusText.textContent = '维护中';
        break;
      default:
        statusText.textContent = status;
    }

    // 处理充电桩类型
    const chargerType = document.getElementById('chargerType');
    const type = '${chargingPile.type}';

    chargerType.textContent = type === 'AC' ? '交流充电桩' : '直流充电桩';



    // 假设从后端获取的预约数据（实际应用中应通过API获取）
    const reservationData = {
      reservationId: "ORD20250705001",
      userId: 1001,
      pileId: 1,
      startTime: "2025-07-05 14:30:00",
      endTime: "2025-07-05 16:30:00"
    };

    // 获取按钮元素
    const btn = document.getElementById("reservationBtn");

    // 按钮点击事件
    btn.addEventListener("click", function() {
      // 拼接URL参数（使用URLSearchParams处理编码）
      const params = new URLSearchParams(reservationData).toString();

      // 跳转到订单详情页
      window.location.href = '/user/record/recordDetail?${params}';
    })


// 显示提示信息
    function showToast(message) {
      toastMessage.textContent = message;
      toast.classList.add('show');

      setTimeout(function () {
        toast.classList.remove('show');
      }, 3000);
    }

// 更新侧边栏预约徽章
    function updateReservationBadge() {
      const badge = document.querySelector('.nav-link:has(i.fas.fa-calendar-plus) .badge');
      if (badge) {
        const currentCount = parseInt(badge.textContent);
        badge.textContent = currentCount + 1;
      }
    }





// 这里添加缺失的闭合括号

  });


</script>
</body>
</html>